import { Avatar, Button, Divider, Form, Image, Input, Message, Modal, Popconfirm } from "@arco-design/web-react"
import FormItem from "@arco-design/web-react/es/Form/form-item";
import { IconClose, IconDelete, IconMessage, IconUser, IconUserAdd, IconVideoCamera, IconVoice } from "@arco-design/web-react/icon";
import React, { useEffect, useState } from "react";

import http from "../../../http";
import { useDispatch, useSelector } from "react-redux";
import { refreshFriendList, setType } from "../../../store/features/friend";
import { LeoAvatar } from "../../../components/leo_Avatar";
import { deleteConversation, refreshConversationByTargetId } from "../../../store/features/conversation";
import { ConversationType } from "../../../domain/im/entity";




export const UserModelElement: React.FC<any> = ({ clickAddFriend,userInfo }) => {


    // 当前用户
    const { user } = useSelector((state: any) => state.user.value);


    const addFriend = () => {
        clickAddFriend();
    }

    const dispatch = useDispatch();



    const users = useSelector((state: any) => state.friend.value.users);

    const [isFriend, setFriend] = useState(false);
    const [isSelf, setSelf] = useState(false);



    useEffect(() => {

        
        setSelf(user.userId == userInfo.userId )
        const index = users.findIndex((item: any) => item.userId == userInfo.userId)
        if (index != -1) {
            setFriend(true)
        }

        console.log("如何判断我们已经是好友了")
    }, [userInfo, users])


    

  



    const [remark, setRemark] = useState('');


    const setRemarks = async () => {
        const response = await http.post("/setRemarks", {
            remark: remark,
            friendId: userInfo.userId
        })
        Message.success("设置成功")
        dispatch(refreshConversationByTargetId({ targetId: userInfo.userId, type: ConversationType.private }))
        dispatch(refreshFriendList())
    }


    return <>
        


        <div className="flex flex-col items-center  px-2">
            <div className="flex flex-row  w-full justify-between items-center ">
                <div className="flex flex-row  items-center cursor-pointer mt-2 ">
                    <LeoAvatar size={40} userPortrait={userInfo.userPortrait} userName={userInfo.nickName} ></LeoAvatar>
                    <div className="flex flex-col h-[50px] justify-center items-start ml-2">
                        <span className="max-w-[160px] text-ellipsis overflow-hidden text-[16px]  text-black">

                            {userInfo.nickName}


                            {
                                userInfo.gender == "MALE" && <IconUser className=" ml-1 text-blue-600" />
                            }

                            {
                                userInfo.gender == "FEMALE" && <IconUser className=" ml-1 text-red-400" />
                            }

                        </span>
                        <span className="max-w-[160px] text-ellipsis overflow-hidden text-[14px]  text-gray-400">地区: {userInfo.provinceCity}</span>
                    </div>
                </div>
                {/* {
                    isFriend ?

                        <Popconfirm
                            focusLock
                            getPopupContainer={(): any => topRef && topRef.current}
                            title='确定删除好友？'
                            content='您确定要删除吗?'
                            position="right"
                            onOk={async () => {
                                const response = await http.post("/removeFriend?friendId=" + userInfo.userId)
                                dispatch(deleteConversation({ targetId: userInfo.userId }));
                                dispatch(refreshFriendList())
                                onVisibilityChange();
                                setPopupVisible(false);
                            }}
                            onCancel={() => {
                            }}
                        >
                            <div className="text-[12px]  text-gray-500 flex flex-row items-center cursor-pointer">
                                <IconDelete className="text-[14px]" />
                                <span className="ml-1">删除好友</span>
                            </div> </Popconfirm> :
                        <div className="text-[12px]  text-gray-500 flex flex-row items-center cursor-pointer" onClick={addFriend}>
                            <IconUserAdd className="text-[14px]" />
                            <span className="ml-1">添加好友</span>
                        </div>
                } */}
            </div>
            <div className="w-full">
                <Divider className="mx-0 my-[13px]"></Divider>
            </div>

            {
                isFriend && !isSelf &&  <>
                    <div className="w-full flex flex-row items-center">
                        <span className="w-[50px] text-left text-gray-400">备注</span>
                        <div className="flex-1">
                             <Input
                                    key='remarkinput'
                                    normalizeTrigger={['onBlur']}
                                    normalize={(v) => {
                                        setRemarks();
                                        return v.trim();
                                    }}
                                    style={{ backgroundColor: 'white' }}
                                    placeholder='备注'
                                    defaultValue={userInfo.remark}
                                    onChange={(value, e) => {
                                        setRemark(value);
                                    }}

                                ></Input>
</div>
                    </div>
                    <div className="w-full">
                        <Divider className="mx-0 my-[13px]"></Divider>
                    </div>
                </>
            }

            <div className="w-full flex flex-row items-center cursor-pointer">
                <span className="w-[70px] text-left text-gray-400">朋友圈</span>
                <div className="flex-1 flex flex-row space-x-2 just">
                    <img
                        width={40}
                        src='//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp'
                        alt='lamp'
                    />
                    <img
                        width={40}
                        src='//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp'
                        alt='lamp'
                    />
                    <img
                        width={40}
                        src='//p1-arco.byteimg.com/tos-cn-i-uwbnlip3yd/a8c8cdb109cb051163646151a4a5083b.png~tplv-uwbnlip3yd-webp.webp'
                        alt='lamp'
                    />
                </div>
            </div>

            <div className="w-full">
                <Divider className="mx-0 my-[13px]"></Divider>
            </div>

            <div className={`w-full flex flex-row items-start `} >
                <span className="w-[80px] text-left text-gray-400">个性签名</span>
                <div className="flex-1 text-left max-w-[200px]">
                    {
                        userInfo.signature
                    }
                </div>
            </div>

            {
                !isFriend && !isSelf  && <>
                    <div className="w-full">
                        <Divider className="mx-0 my-[13px]"></Divider>
                    </div>
                    <Button onClick={addFriend} className="w-[180px] my-2"><span className="text-[#23C343] font-bold">添加到通讯录</span></Button>
                </>
            }


            {
                isFriend && !isSelf && <>
                    <div className="w-full">
                        <Divider className="mx-0 my-[13px]"></Divider>
                    </div>

                    <div className="flex flex-row w-full justify-between mt-2 mb-4  px-6">
                        <div className="flex flex-col items-center cursor-pointer">
                            <IconMessage className="text-[30px] text-[#333]"></IconMessage>
                            <span className="text-[12px] mt-1 text-gray-500">发消息</span>
                        </div>

                        <div className="flex flex-col items-center cursor-pointer">
                            <IconVoice type="icon-yuyin" className="text-[30px] text-[#333]"></IconVoice>

                            <span className="text-[12px] mt-1 text-gray-500">语音通话</span>
                        </div>

                        <div className="flex flex-col items-center cursor-pointer">
                            <IconVideoCamera className="text-[30px] text-[#333]"></IconVideoCamera>
                            <span className="text-[12px] mt-1 text-gray-500">视频通话</span>
                        </div>

                    </div>
                </>
            }
        </div>
    </>
}


export const UserModelBlock: React.FC<{ children: React.ReactNode, isVisible: boolean, onVisibilityChange: () => void }> = ({ children, isVisible, onVisibilityChange }) => {

    return <Modal
        style={{ boxShadow: '0px 2px 10px rgba(0, 0, 0, 0.10)' }}
        className={`"shadow-2xl w-[300px] border border-gray-100 p-[12px] rounded-xl"`}
        title={null}
        alignCenter={false}
        mask={true}
        visible={isVisible}
        footer={null}
        closeIcon={null}
        onOk={() => onVisibilityChange()}
        onCancel={() => onVisibilityChange()}
        autoFocus={false}
        focusLock={false}
    >
        {children}
    </Modal >
}